<template>
    <div class="content-all">
            <div class="fine-suit">
                <img src="../../../assets/images/swiper3.jpg" alt="">
            </div>
            <div class="classification-suit">
                <!-- 轮播 -->
                <div class="contentSwiper">
                <swiper
                    ref="mySwiper"
                    :options="swiperOptions"
                    class="content"
                    autoplay="true"
                >
                    <swiper-slide 
                    v-for="(item,index) in swiperArr"
                    :key="index"
                    >
                        <div class="talents-item"  >
                            <div class="img">
                            <img :src="item.url" alt="" />
                            </div>
                            <div class="message">
                            <p class="uname">{{item.title}}</p>
                            <p class="occupa">{{item.price}}元起</p>
                            </div>
                        </div>
                    </swiper-slide>
                    
                    
                </swiper>
                </div>
            </div>
        </div>
</template>

<script>

export default {
    name:'ShoppingSwiper',
    data(){
        return{
            swiperOptions: {
                slidesPerView: 3.5,
                spaceBetween: 10,
                
            },
        }
    },
    mounted(){
        
    },
    props:{
        swiperArr:{
            type:Array,
            default:[]
        }
    }
}
</script>

<style lang='less' scoped>
.content-all{
    background-color: white;
}
.fine-suit{
    width:100%;
    height: 126px;
}
.fine-suit img{
    width: 100%;
    height: 100%;
}
.classification-suit{
    width:100%;
    height: 197px;
}
// 轮播图
.contentSwiper {
  width: 100%;
  height: 100%;
}
.talents-item {
  width: 108px;
  height: 186px;
  .img {
    width: 100px;
    height: 100px;
    margin: 11px 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .message {
      width: 100%;
    .uname {
      width: 87px;
      height: 29px;
      color: rgba(16, 16, 16, 1);
      font-size: 12px;
      line-height: 12px;
      text-align: left;
      font-family: Arial;
      margin: 0 auto;
    }
    .occupa {
        width: 52px;
        height: 23px;
        line-height: 17px;
        color: rgba(242, 61, 82, 1);
        font-size: 12px;
        text-align: left;
        font-family: Arial;
        margin-left:12px ;
        margin-top: 7px;
        margin-bottom: 16px;
    }
  }
}



</style>
